import React, { useState, useEffect } from 'react';
import { Card, Tabs } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import type { Dispatch } from 'umi';
import type { ConnectState } from '@/models/connect';
import PrepareTable from './components/PrepareTable';

const { TabPane } = Tabs;

// 权限角色数组
const roles: string[] = ['学生评教', '同行互评', '督导评教'];

// 当前组件的 props 类型
export type PrepareProps = {
  dispatch: Dispatch;
  userQuota: any[];
};

// 当前列的 render 属性的类型
type columnRenderType = {
  children: any;
  props: {
    rowSpan?: number;
    colSpan?: number;
  };
};

// 数据项类型
export interface Item {
  key: string;
  firstLevel: string;
  secondLevel: number;
  score: string;
}

// 列类型
type columnType = {
  title: string;
  dataIndex: string;
  width: number;
  editable: boolean;
  render?: (text: any, row: Item, index: number) => columnRenderType;
};

// tab 各列规则集合类型
type columnRulesType = {
  key: number;
  columns: columnType[];
};

// 表格列合并映射规则类型
type columnRowSpanMapType = {
  val: number;
  expression: number[];
};

// 表格列合并映射规则
const columnRowSpanMap: columnRowSpanMapType[] = [
  {
    val: 4,
    expression: [0],
  },
  {
    val: 0,
    expression: [0, 4],
  },
  {
    val: 4,
    expression: [4],
  },
  {
    val: 0,
    expression: [4, 8],
  },
  {
    val: 3,
    expression: [8],
  },
  {
    val: 0,
    expression: [8, 11],
  },
  {
    val: 3,
    expression: [11],
  },
  {
    val: 0,
    expression: [11, 14],
  },
];

// 表格列
const columns: columnType[] = [
  {
    title: '一级指标',
    dataIndex: 'firstLevel',
    width: 750 / 4,
    editable: true,
    render: (text: any, row: Item, index: number) => {
      const obj: columnRenderType = {
        children: text,
        props: {},
      };
      columnRowSpanMap.forEach((item) => {
        const len = item.expression.length;
        if (len === 1) {
          if (index === item.expression[0]) {
            obj.props.rowSpan = item.val;
          }
        }
        if (len !== 1 && index > item.expression[0] && index < item.expression[1]) {
          obj.props.rowSpan = item.val;
        }
      });
      return obj;
    },
  },
  {
    title: '二级指标',
    dataIndex: 'secondLevel',
    width: 750 / 4,
    editable: true,
  },
  {
    title: '分数',
    dataIndex: 'score',
    width: 750 / 4,
    editable: true,
  },
];

// 表格列规则(这里没有使用同一个的原因就是考虑到后面可能三种角色的表格不一样)
const columnRules: columnRulesType[] = [
  {
    key: 1,
    columns,
  },
  {
    key: 2,
    columns,
  },
  {
    key: 3,
    columns,
  },
];

/**
 * @description 评教准备
 */
const Prepare = (props: PrepareProps) => {
  // 当前角色权限
  const [role, setRole] = useState(0);
  // 获取评教准备的数据
  useEffect(() => {
    const { dispatch } = props;
    dispatch({
      type: 'quota/fetchCurrent',
    });
  }, []);

  // tab 切换时候的回调
  const callback = (key: string) => {
    setRole(Number(key)); // 设置角色
  };

  return (
    <PageContainer waterMarkProps={{ content: '河北交通职业技术学院' }}>
      <Card style={{ minHeight: 340 }}>
        <Tabs defaultActiveKey="1" onChange={callback}>
          {roles.map((item, index) => {
            const { userQuota } = props;
            return (
              <TabPane tab={item} key={index + 1}>
                {userQuota.length ? (
                  <PrepareTable
                    dispatch={props.dispatch}
                    role={role}
                    dataSource={userQuota[index].quota}
                    columns={columnRules[index].columns}
                  />
                ) : null}
              </TabPane>
            );
          })}
        </Tabs>
      </Card>
    </PageContainer>
  );
};
export default connect(({ quota }: ConnectState) => ({
  userQuota: quota.currentQuota as any[],
}))(Prepare);
